// $Font: Avenir, Helvetica, Arial, sans-serif;
$Font: PingFang SC, Microsoft Yahei, sans-serif;
$ThemeColor: #1988fc;
$myFontSize: 18px;
$fontColor: #24292e;
$mask: rgba(25, 136, 252, 0.5);
$boxShadow: 5px 5px 20px rgb(221, 221, 221, 0.5);

.font{
  font-family: PingFang SC, Microsoft Yahei, sans-serif;
}
.themeColor{
  background: #1988fc;
}
.fontSize{
  font-size: 18px;
}
.fontColor{
  color: #24292e;
}
.shadow{
  box-shadow: 5px 5px 20px rgb(221, 221, 221, 0.5);
}
html,
body {
  padding: 0;
  margin: 0;
  font-size: 17px;
  height: 100%;
  font-family: $Font;
  background-color: #f1f2f6;
}
#app {
  overflow: auto;
  height: 100%;
  width: 100%;
}
.clear::after{
  content: "";
  clear: both;
  display: block;
}
ul {
  list-style-type: none;
  padding: 0;
}
h1,h2,h3,h4,h5,h6{
  margin: 0;
}
.el-pagination.is-background .btn-prev,
.odivt .el-pagination.is-background .btn-next,
.odivt .el-pagination.is-background .el-pager li {
  background-color: #eaeaea;
}

.odivt .el-pagination.is-background .btn-prev {
  margin: 0px 5px 0px 0px;
}

.odivt .el-pagination {
  padding: 0px;
  padding-top: 4px;
}
.content_z {
  height: 100%;
  padding: 0 20px 20px 20px;
  position: relative;
  box-sizing: border-box;
  .header {
    height: 35px;
  }
  .main_content {
    //   这里是表格用到的
    position: absolute;
    top: 70px;
    left: 0px;
    bottom: 5px;
    right: 0px;
    background-color: #ffffff;
    padding: 20px;
    margin: 0px 20px;
    box-sizing: border-box;
    box-shadow: 5px 5px 20px rgb(221, 221, 221, 0.5);
  }
  .bootomPage {
    position: absolute;
    left: 0px;
    bottom: 10px;
    right: 0px;
    box-sizing: border-box;
  }
  .create_details {
    //   这里是创建或者编辑用到的
    position: absolute;
    top: 70px;
    left: 0px;
    bottom: 5px;
    right: 0px;
    background-color: #ffffff;
    padding: 20px;
    margin: 0px 20px;
    box-sizing: border-box;
    box-shadow: 5px 5px 20px rgb(221, 221, 221, 0.5);
    overflow: auto;
  }
  .fixheader {
    position: fixed;
  }
  .creatHeader {
    position: absolute;
    left: 30px;
  }
  .header_space {
    display: flex;
    justify-content: space-between;
    .header_space_left {
      display: flex;
      flex: 1;
      width: 50%;
    }
    .header_space_right {
      .listBtn {
        float: right;
        margin-right: 10px;
      }
    }
    .header_popover {
      min-width: 43%;
    }
    .textoverflow {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
  }
  .creatcode_form {
    position: absolute;
    left: 20px;
    right: 0px;
    bottom: 0px;
    top: 70px;
    overflow: auto;
    background-color: #fff;
    padding-top: 20px;
    margin-right: 20px;
    padding-left: 40px;
    box-shadow: 5px 5px 20px rgb(221, 221, 221, 0.5);
  }
  .creat_noBackground {
    //   这个是创建（编辑）时用到的，没有白色背景的
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0px;
    top: 70px;
    overflow: auto;
  }
  .main_table_pageSetBootom {
    //   这个是表格下方有分页按钮用到的
    position: absolute;
    top: 70px;
    left: 0px;
    bottom: 50px;
    right: 0px;
    background-color: #ffffff;
    padding: 20px;
    margin: 0px 20px;
    box-sizing: border-box;
    box-shadow: 5px 5px 20px rgb(221, 221, 221, 0.5);
  }
  
}
.r {
  float: right;
}
.l {
  float: left;
}
.clear {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

// 蓝色默认
body {
  --Theme-1: #eff6ff;
  --Theme-2: #dbeafe;
  --Theme-3: #bfdbfe;
  --Theme-4: #93c5fd;
  --Theme-5: #60a5fa;
  --Theme-6: #3b82f6;
  --Theme-7: #2563eb;
  --Theme-8: #1d4ed8;
  --Theme-9: #1e40af;
  --Theme-10: #1e3a8a;
  --Theme-A2: rgba(43, 149, 252, 0.15);
  --Vice-Theme: #14b8a6;
}
body[data-theme="green"] {
  --Theme-1: #ECFDF5;
  --Theme-2: #D1FAE5;
  --Theme-3: #A7F3D0;
  --Theme-4: #6EE7B7;
  --Theme-5: #34D399;
  --Theme-6: #10B981;
  --Theme-7: #059669;
  --Theme-8: #047857;
  --Theme-9: #065F46;
  --Theme-10: #064E3B;
  --Theme-A2: rgba(20, 184, 166, 0.15);
  --Vice-Theme: #FBBF24;
}
body[data-theme="red"] {
  --Theme-1: #FFF1F2;
  --Theme-2: #FFE4E6;
  --Theme-3: #FECDD3;
  --Theme-4: #FDA4AF;
  --Theme-5: #FB7185;
  --Theme-6: #F43F5E;
  --Theme-7: #E11D48;
  --Theme-8: #BE123C;
  --Theme-9: #9F1239;
  --Theme-10: #881337;
  --Theme-A2: rgba(244, 63, 94, 0.15);
  --Vice-Theme: #F59E0B;
}
body[data-theme="orange"] {
  --Theme-1: #FFF7ED;
  --Theme-2: #FFEDD5;
  --Theme-3: #FED7AA;
  --Theme-4: #FDBA74;
  --Theme-5: #FB923C;
  --Theme-6: #F97316;
  --Theme-7: #EA580C;
  --Theme-8: #C2410C;
  --Theme-9: #9A3412;
  --Theme-10: #7C2D12;
  --Theme-A2: rgba(255, 179, 92, 0.15);
  --Vice-Theme: #EF4444;
}